<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单数据双向绑定</title>
</head>

<body>
    <div id="app">
        <!-- 阻止事件默认行为，当前阻止的是submit -->
        <form action="#" @submit.prevent="submitForm">
            姓名（文本）：<input type="text" v-model="name">
            <br><br>
            性别（单选按钮）：
            <input type="radio" name="sex" value="1" v-model="sex">男
            <input type="radio" name="sex" value="0" v-model="sex">女
            <br><br>
            技能（多选框）：
            <input type="checkbox" name="skills" value="java" v-model="skills">java开发
            <input type="checkbox" name="skills" value="vue" v-model="skills">vue
            <input type="checkbox" name="skills" value="python" v-model="skills">python
            <br><br>
            城市（下拉框）：
            <select name="citys" v-model="city">
                <option v-for="c in citys" :value="c.code">{{c.name}}</option>
            </select>
            <br><br>
            说明（多行文本）: <br>
            <textarea id="" cols="30" rows="5" v-model="desc"></textarea>
            <br><br>
            <button type="submit">提交</button>
        </form>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                name: '',
                sex: '0',  // 默认值为0，它就会选中值为0的，也就是女生。
                skills: ['vue'], // 复选框被勾选之后会获得数组形式,默认选中vue。
                citys: [
                    { code: 'bj', name: '北京' },
                    { code: 'sd', name: '山东' },
                    { code: 'sh', name: '上海' },
                ],
                city: 'sd',
                desc: '',
            },
            methods: {
                submitForm: function () {
                    // 处理提交表单。
                    // 发送ajax请求异步处理。
                    alert(this.name + ',' + this.sex + ',' + this.skills + ',' + this.city + ',' + this.desc)
                }
            },
        })
    </script>

</body>

</html>